<template>
	<div id="app" style="transform: scale(0.85);position: absolute;margin-top: -200px;margin-left: -500px;">


		<el-row style="padding: 20px;">
			<div style="position: absolute;margin-left: 20px;">
				<div>
					<el-select v-model="value" @on-change="chickvalue" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
			
			
			
			</div>
			<el-col :span="13">
				<el-button type="info" icon="el-icon-search" @click='searchBook'>搜索</el-button>
			</el-col>


		</el-row>

		<el-table stripe border :data="tableData" style="width: 100%">
			<el-table-column label="商品图片" width="180">
				
				<template slot-scope="scope">
					<el-image style="width: 150px; height: 150px;border: 1px solid #00F7DE;border-radius: 20px;" :src="scope.row.shoppingMedicinePicture"
					:preview-src-list="[scope.row.shoppingMedicinePicture]">
						<div slot="error" class="image-slot">
							<i class="el-icon-picture-outline"></i>
						</div>
					</el-image>
				</template>
			
			</el-table-column>
			<el-table-column prop="shoppingMedicineName" label="商品名称" width="230">
			</el-table-column>
			<el-table-column prop="shoppingMedicinePrice" label="总价" width="120">
			</el-table-column>
			<el-table-column prop="shoppingMedicineNumber" label="购买数量" width="120">
			</el-table-column>
			
			<el-table-column prop="userName" label="收货人" width="100">
			</el-table-column>
			


			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<el-button type="info" icon="el-icon-edit" @click="updateBook(scope.row)" style="transform: scale(0.8);">编辑</el-button>
					

					<el-button type="info" @click="deleteBook(scope.row)" style="transform: scale(0.8);position: absolute;margin-left: -10px;">删除</el-button>
					<el-button type="info" @click="Handle(scope.row)" style="transform: scale(0.8);position: absolute;margin-left: 50px;">处理</el-button>
				</template>

			</el-table-column>
		</el-table>


		<el-dialog title="修改订单信息" :visible.sync="updateMedicineVisible" width="80%" :before-close="handleClose">
			<el-form :model="updateMedicineForm" label-width="80px">
				<el-form-item label="商品名称:">
					<el-input v-model="updateMedicineForm.shoppingMedicineName"></el-input>
				</el-form-item>
				<el-form-item label="商品总价:">
					<el-input v-model="updateMedicineForm.shoppingMedicinePrice"></el-input>
				</el-form-item>
				<el-form-item label="购买数量:">
					<el-input v-model="updateMedicineForm.shoppingMedicineNumber"></el-input>
				</el-form-item>
				<el-form-item label="收货人:">
					<el-input v-model="updateMedicineForm.userName"></el-input>
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary" @click="onUpdateCommit">修改</el-button>
					<el-button @click="onupdatecancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'app',
		
		mounted() {
			this.requestBook()
		},
		methods: {
			onSelectedDrug(id) {
				let obj = {};
				obj = this.expressList.find((item) => { //这里的userList就是上面遍历的数据源
					return item.abbreviation === id; //筛选出匹配数据
				});
				console.log(obj.express); //获取的 name
				console.log(id); //获取的 id
			},
			
			requestBook() {
				var that = this
				this.$axios.post("http://localhost:8088/xiaoxiang/findAllUserShoppingTwo")
					.then(function(response) {
						that.tableData = response.data.data
					}).catch(function(error) {
						console.log(error)
					})
			},
			searchBook() {
				var that = this
					console.log(this.value)
					this.$axios.post('http://localhost:8088/xiaoxiang/findShoppingByStatic', {
							statics: this.value
						})
						.then(function(response) {
							console.log(response.data.data)
							that.tableData = response.data.data
						}).catch(function(error) {
							console.log(error)
						})
				},
			// 	var that = this
			// 	console.log(this.input)
			// 	this.$axios.post('http://localhost:8088/xiaoxiang/findAllUserShopping', {
			// 			userName: this.input
			// 		})
			// 		.then(function	(response) {
			// 			console.log(response.data.data)
			// 			that.tableData = response.data.data
			// 		}).catch(function(error) {
			// 			console.log(error)
			// 		})
			// },
			
			updateBook(medicine) {
				console.log(medicine)
				this.updateMedicineForm = medicine
				this.updateMedicineVisible = true
			},
			onUpdateCommit() {
				var that = this
				
				this.$axios.post('http://localhost:8088/xiaoxiang/updataShopping', {
						shoppingId: this.updateMedicineForm.shoppingId,
						shoppingMedicinePicture: this.updateMedicineForm.shoppingMedicinePicture,
						shoppingMedicineName: this.updateMedicineForm.shoppingMedicineName,
						shoppingMedicinePrice: this.updateMedicineForm.shoppingMedicinePrice,
						shoppingMedicineNumber: this.updateMedicineForm.shoppingMedicineNumber,
						medicineId: this.updateMedicineForm.medicineId,
						userName: this.updateMedicineForm.userName
						

					})
					.then(function(response) {
						console.log()
						if (response.data.code == 0) {
							that.$message({
								message: response.data.msg,
								type: 'success'
							})
							that.updateBookVisible = false
							that.requestBook()
						} else {
							that.$message.error(response.data.msg);
						}
					}).catch(function(error) {
						that.$message.error(error);
					})
			},
			onupdateMedicineVisible() {
				this.updateMedicineVisible = true
			},
			onupdatecancel() {
				this.updateMedicineVisible = false
			},
			deleteBook(medicine) {
				var that = this
				this.deleteList = medicine
				console.log(this.deleteList.shoppingMedicineName)
				this.$axios.post("http://localhost:8088/xiaoxiang/deleteShopping", {
						shoppingMedicineName: this.deleteList.shoppingMedicineName
					})
					.then(function(response) {
						console.log(response.data.msg)
						if (response.data.code == 0) {
							that.$message(response.data.msg);
							that.requestBook()()
						} else {
							that.$message.error(response.data.msg);
						}
					}).catch(function(error) {
						console.log(error)
					})
			},
			Handle(medicine){
				var that = this
				this.deleteList = medicine
				console.log(this.deleteList.shoppingMedicineName)
				this.$axios.post("http://localhost:8088/xiaoxiang/deleteShopping", {
						shoppingMedicineName: this.deleteList.shoppingMedicineName
					})
					.then(function(response) {
						console.log(response.data.msg)
						if (response.data.code == 0) {
							that.$message(response.data.msg);
							that.requestBook()()
						} else {
							that.$message.error(response.data.msg);
						}
					}).catch(function(error) {
						console.log(error)
					})
				
			}
		},
		data() {
			return {
				tableData: [{
					shoppingId: '',
					shoppingMedicinePicture: '',
					shoppingMedicineName: '',
					shoppingMedicinePrice: '',
					shoppingMedicineNumber: '',
					medicineId: '',
					userName: ''

				}],
				deleteList: [{
					shoppingId: '',
					shoppingMedicinePicture: '',
					shoppingMedicineName: '',
					shoppingMedicinePrice: '',
					shoppingMedicineNumber: '',
					medicineId: '',
					userName: ''
				}],
				input: '',
				addBookVisible: false,
				updateBookVisible: false,
				form: {
					shoppingId: '',
					shoppingMedicinePicture: '',
					shoppingMedicineName: '',
					shoppingMedicinePrice: '',
					shoppingMedicineNumber: '',
					medicineId: '',
					userName: ''
				},
				updateMedicineForm: {
					shoppingId: '',
					shoppingMedicinePicture: '',
					shoppingMedicineName: '',
					shoppingMedicinePrice: '',
					shoppingMedicineNumber: '',
					medicineId: '',
					userName: ''
				},
				options: [{
					value: '0',
					label: '需处理订单'
				}, {
					value: '1',
					label: '不需处理订单'
				}],
				value: '',
				identity: ''
			}
		}
	}
</script>
<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>
